<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>塔内PC协会介绍</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="../css/intro-common.css"/>
	<link rel="stylesheet" href="../css/intro-style.css"/>
	<script src="../js/jquery.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/holder.js"></script>
	
</head>
<body data-spy="scroll" data-target="#myScrollspy">

<!--导航条,固定在顶部-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
	<!--logo-->
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">logo</a>
		</div>

		<!--导航-->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li><a>主页</a></li>
				<li class="active"><a href="#">协会介绍</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">部分风采<span class="caret"></span></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#">理事会</a></li>
						<li class="divider"></li>
						<li><a href="#">秘书部</a></li>
						<li><a href="#">策划部</a></li>
						<li class="divider"></li>
						<li><a href="#">技术部</a></li>
						<li><a href="#">网络部</a></li>
						<li><a href="#">概设部</a></li>
					</ul>
				</li>
				<li><a>我要报修</a></li>
				<li><a>我要报名</a></li>
			</ul>
		</div>
	</div>
</nav>

<!---------------------------巨幕-------------------------------->
<div id="jumbotron-header" class="jumbotron">
	<div class="container-fluid">
		<h1>塔内PC协会</h1>
		<p>一个XXOO的协会</p>
		<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
		<p><a class="btn btn-danger btn-lg" role="button">Learn more</a></p>
	</div>
</div>
<div id="home" class="container">


	<div class="row">
		<!----------------------------滚动区----------------------------->
		<div class="col-lg-2 col-md-2 hidden-sm hidden-xs" id="myScrollspy">
			<ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" data-offset-top="125">
				<li class="active"><a href="#features">特色<span class="glyphicon glyphicon-chevron-right"></span></a></li>
				<li><a href="#introduction">协会介绍<span class="glyphicon glyphicon-chevron-right"></a></li>
				<li><a href="#purpose">协会宗旨<span class="glyphicon glyphicon-chevron-right"></a></li>
				<li><a href="#associations">部门机构<span class="glyphicon glyphicon-chevron-right"></a></li>
			</ul>
		</div>

		<!---------------------------内容-------------------------------->
		<div id="content" class="col-lg-10 col-md-10 ">
			<div id="features">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-4 feature-box">
							<img data-src="holder.js/160x160"  alt="IT-Man"/>

							<div class="caption">
								<h2>拯救师姐</h2>

								<p>stickUp is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily make any element, on any page, stick to the top of the browser window as the user scrolls past it. This feature is excellent for navigation menus, logos and/or contact information, which you may want the user to see at all times.</p>

								<p></p>
							</div>

						</div>
						<div class="col-md-4 feature-box">
							<img data-src="holder.js/160x160" alt="train"/>

							<div class="caption">
								<h2>技能提升</h2>

								<p>stickUp is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily make any element, on any page, stick to the top of the browser window as the user scrolls past it. This feature is excellent for navigation menus, logos and/or contact information, which you may want the user to see at all times.</p>

								<p></p>
							</div>

						</div>
						<div class="col-md-4 feature-box">
							<img data-src="holder.js/160x160"  alt="activity"/>

							<div class="caption">
								<h2>缤纷活动</h2>

								<p>stickUp is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily make any element, on any page, stick to the top of the browser window as the user scrolls past it. This feature is excellent for navigation menus, logos and/or contact information, which you may want the user to see at all times.</p>

								<p></p>
							</div>

						</div>
					</div>
				</div>
			</div>
			<hr>

			<div id="introduction" class="row lead-font">
				<div class="col-lg-7">
					<h2>社团简介</h2>
					<p>塔内，取名于象牙塔内，意指大学生。</p>
					<p>本社团旨在为在校大学生提供一个对外可与社会接轨，对内可服务学生并增加校园信息化的一个学生社团。</p>
					<p>通过效仿现代社会的人才培养机制，创新的管理理念，开放的学习方式，多元的发展方向，为华师学子提供一个IT业就业、创业人才的培训机构以及体现自我价值的发展平台。
					</p>
				</div>
				<div class="col-lg-5"></div>

			</div>
			<hr>

			<div id="purpose" class="row lead-font">
				<div class="col-lg-5"></div>
				<div class="col-lg-7">
					<h2>社团宗旨</h2>

					<p>“服务同窗，锻炼自我，超越局限，创造卓越”是本社团的宗旨</p>
					<p>这促使我们在学校培养出一群符合社会要求，具有卓越创新能力，优秀社会适应能力，杰出校内奉献能力，积极、文明、健康、向上的多元化优秀人才。</p>
				</div>

			</div>
			<hr>

			<div id="associations" class="row lead-font">
				<div class="col-lg-7">

					<h2>机构部门</h2>

					<div class="col-lg-offset-1 col-lg-10">
						<h3>理事会</h3>

						<p>统筹大局，制定社团发展方向，确保社团在华南师范大学团委和社团联合会的指导下正确，健康地发展</p>
						<p>设置会长一名，副会长两名</p>
					</div>
					<div class="col-lg-offset-1 col-lg-10">
						<h3>秘书部</h3>

						<p>协调各部门；组织大小培训；掌管财务</p>
						<p>设置部长一名，副部若干</p>
					</div>
					<div class="col-lg-offset-1 col-lg-10">
						<h3>策划部</h3>

						<p>组织各种大小型有益丰富学生课外生活以及维护学生切身利益的活动，配合团委和社联举办各种活动</p>
						<p>设置部长一名，副部若干</p>
					</div>
					<div class="col-lg-offset-1 col-lg-10">
						<h3>网络部</h3>

						<p>联系学校社团组织，义务帮忙建立网站，促进学校信息化进
							程；对学生网络知识进行培训；接轨社会，拉取社会项目订单</p>
						<p>设置部长一名，副部若干</p>
					</div>
					<div class="col-lg-offset-1 col-lg-10">
						<h3>技术部</h3>

						<p>组件一支服务到每一间宿舍的义务维修队；对学生进行硬件知识普及</p>
						<p>设置部长一名，副部若干</p>
					</div>
					<div class="col-lg-offset-1 col-lg-10">
						<h3>概念设计部</h3>

						<p>塔内的“宣传大使”，绘制海报，制作视频，网站美工，对学生进行PS免费培训</p>
						<p>设置部长一名，副部若干</p>
					</div>
				</div>
				<div class="col-lg-5"></div>
			</div>
			<hr>

		</div>
	</div>
</div>

<script>
	$('#myScrollspy').scrollspy({
		offset: 1000
	});
</script>
</body>
</html>                                		